import { Card } from 'antd'
import logo from '@/assets/logo.png'
import './index.scss'
import { Button, Checkbox, Form, Input } from 'antd'
import { useStore } from '@/store'
import { useNavigate } from 'react-router-dom'
import { message } from 'antd'
function Login() {
	const navigate = useNavigate()
	const { loginStore } = useStore()
	const onFinish = async (values) => {
		console.log('Success:', values)
		const { mobile, password } = values
		try {
			await loginStore.login(mobile, password)
			navigate('/')
		} catch (e) {
			message.error(e.response?.data?.message || '登录失败')
		}
	}
	return (
		<div className="login">
			<Card className="login-container">
				<img className="login-logo" src={logo} alt="" />
				{/* 登录表单 */}
				<Form
					validateTrigger={['onBlur', 'onChange']}
					onFinish={onFinish}
				>
					<Form.Item
						label="账号"
						name="mobile"
						rules={
							({
								pattern: /^1[3-9]\d{9}$/,
								message: '手机号码格式不对',
								validateTrigger: 'onBlur',
							},
							[
								{
									required: true,
									message: '请填写账号',
								},
							])
						}
					>
						<Input />
					</Form.Item>

					<Form.Item
						label="密码"
						name="password"
						rules={[
							{
								required: true,
								message: '请填写密码',
							},
						]}
					>
						<Input.Password />
					</Form.Item>

					<Form.Item name="remember" valuePropName="checked">
						<Checkbox className="login-checkbox-label">
							我已阅读并同意「用户协议」和「隐私条款」
						</Checkbox>
					</Form.Item>

					<Form.Item>
						<Button
							type="primary"
							htmlType="submit"
							size="large"
							block
						>
							登录
						</Button>
					</Form.Item>
				</Form>
			</Card>
		</div>
	)
}
export default Login
